<template>
  <div class="container">
    <h3 class="title"><span />所有文件</h3>
    <el-button size="small" type="primary" icon="el-icon-arrow-left" class="back" @click="prev">返回</el-button>
    <div class="content">
      <div class="left min-w">
        <el-tree
          ref="pathTree"
          :data="treeData"
          node-key="key"
          :props="defaultProps"
          :expand-on-click-node="false"
          :default-expanded-keys="defaultChecked"
          :check-on-click-node="true"
          highlight-current
          @node-click="handleNodeClick"
        />
      </div>
      <div class="right">
        <el-table :data="filesData">
          <el-table-column
            label="文件名"
            prop="title"
          >
            <template slot-scope="scope">
              <img :src="require(`../icon/${scope.row.type}.png`)" alt="" class="fileIcon">
              <span class="mg-l pointer" @click="handleNodeClick(scope.row)">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.type !='path'" class="edit" size="mini" @click="getInfo(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.type !='path'" type="primary" class="blue" size="mini" icon="el-icon-refresh" @click="goRefresh(scope.row)">更新</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="mg-t"
          :current-page="page.currentPage"
          :page-sizes="page.pageSize"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <OnlineEditor
          :dialog-show.sync="dialogShow"
          :editor-content="tempForm.content"
          :editor-type="fileType"
          :curr-path="currEditorPath"
          :width="80"
        />
      </div>

    </div>
  </div>
</template>

<script>
import themeApi from '@/api/theme'
import mouldApi from '@/api/theme'
import md5 from 'md5'
export default {
  data() {
    return {
      fileType: 'html',
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      website_id: '',
      treeData: [],
      defaultChecked: [],
      defaultProps: {
        children: 'child',
        label: 'title'
      },
      path: '',
      filesData: [],
      tableData: [],
      dialogShow: false,
      tempForm: {
        content: '',
        path: ''
      },
      lang: '',
      tempRules: {
        content: [
          { required: 'true', message: '内容不能为空', trigger: 'blur' }
        ]
      },
      currEditorPath: ''
    }
  },
  created() {
    this.website_id = this.$route.query.id
    this.lang = this.$route.query.lang
    this.getFilesPath()
  },
  methods: {
    setExpandedKeys(key) {
      this.defaultChecked = [key]
    },
    setCurrentKey(key) {
      this.$refs.pathTree.setCheckedKeys([])
      this.$refs.pathTree.setCheckedKeys([key])
    },
    handleSizeChange(val) {
      this.page.size = val
      this.filesData = this.getFileData(this.tableData, this.page.currentPage, this.page.size)
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.filesData = this.getFileData(this.tableData, this.page.currentPage, this.page.size)
    },
    getFileData(tableData, currPage, pageSize) {
      return tableData.slice((currPage - 1) * pageSize, currPage * pageSize)
    },
    getFilePath(path, website_id = this.website_id, lang = this.lang) {
      return `${website_id}/${lang}${path}`
    },
    // 更新
    goRefresh(row) {
      const updateForm = {
        path: this.website_id + row.path,
        lang: this.lang,
        website_id: this.website_id
      }
      themeApi.singleUpdate(updateForm).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleNodeClick(val) {
      if (val.type == 'file') {
        // 文件直接打开
        this.getInfo(val)
      } else if (val.type == 'path') {
        // 文件夹获取下面的文件
        this.path = '/' + this.website_id + val.path
        this.setExpandedKeys(md5(this.path))
        this.setCurrentKey(md5(this.path))
      } else {
        // 点击左侧树形结构
        this.path = val.path
      }
      this.getFiles(true)
    },
    // 获取文件目录
    getFilesPath() {
      mouldApi.allFilePath({ website_id: this.website_id, lang: this.lang }).then(res => {
        this.treeData = res.data
        if (res.data.length > 0) {
          this.path = res.data[0].path
          this.setExpandedKeys(md5(res.data[0].path))
          this.setCurrentKey(md5(res.data[0].path))
          this.getFiles()
        }
      })
    },
    // 获取文件
    getFiles(isTable = false) {
      const val = {
        website_id: this.website_id,
        path: this.path,
        lang: this.lang
      }
      mouldApi.allFiles(val).then(res => {
        this.tableData = res.data
        // 从表格点击刷新列表
        if (isTable) {
          this.page.currentPage = 1
        }
        this.filesData = this.getFileData(this.tableData, this.page.currentPage, this.page.size)
        this.page.total = res.data.length
      })
    },
    // 源码查看
    getInfo(row) {
      this.tempForm.path = this.website_id + row.path
      this.fileType = this.getFileExt(row.path)
      this.currEditorPath = this.tempForm.path
      mouldApi.fileRead({ path: this.tempForm.path }).then(res => {
        this.tempForm.content = res.data
        this.dialogShow = true
      })
    },
    getFileExt(path) {
      return path.substr(path.lastIndexOf('.') + 1)
    },
    prev() {
      this.$router.push({ name: 'Theme' })
    }
  }
}
</script>
<style scoped lang='scss'>
  // ::v-deep .el-tree--highlight-current .el-tree-node.is-checked > .el-tree-node__content {
  //     background-color: #f0f7ff !important;
  // }
  .mg-l{
    margin-left: 10px;
  }
  .min-w{
    min-width: 200px;
  }
  .mg-t{
    margin-top:10px
  }
  .pointer:hover{
    cursor:pointer
  }
.back{
    top: 16px;
    right: 21px;
    }
.content{
  margin-top: 36px;
    display: flex;
    justify-content: left;
    .left{
        width: 220px;
        margin-right: 30px;
        background-color: #fff;
        padding: 20px;
    }
    .right{
        width: 100%;
        background-color: #fff;
        padding: 20px;
        .fileIcon{
          width: 17px;
          vertical-align: middle;
        }
    }
}
</style>
